<template>
    <Modal ref="modal" :blur="false" placement="none" :maskClosable="true" @maskClick="close">
        <view class="popup-content" :class="pUpVisiable ? 'show-up' : 'show-down'">
            <view class="modal-title">会员充值 </view>
            <UnlockVip :comicObjec="comicObjec" :bookItem="bookItem" @unLockSuccess="unLockSuccess"></UnlockVip>
        </view>
    </Modal>
</template>

<script setup lang="ts">
import Modal from '@/components/modal/modal.vue'
import UnlockVip from '@/components/unlock-vip/unlock-vip.vue'
import { useNextTick } from "@/hooks"
import { ref, type PropType } from 'vue'

const modal = ref()
const pUpVisiable = ref(false)
const showing = ref(false)
const emit = defineEmits(['unLockSuccess', 'maskClick'])
const props = defineProps({
    comicObjec: {
        type: Object as PropType<API.BookReading>,
        default: {}
    },
    bookItem: {
        type: Object as PropType<API.BookDetail>,
        default: {}
    }
});

const open = async () => {
    if (showing.value) return
    showing.value = true
    await uni.hideTabBar({ animation: false })
    await modal.value.open()
    await useNextTick()
    pUpVisiable.value = true
    showing.value = false
}
const close = async () => {
    if (showing.value) return
    showing.value = true
    await modal.value.close()
    await useNextTick()
    setTimeout(() => {
        uni.showTabBar({ animation: false })
        showing.value = false
    }, 400);
    pUpVisiable.value = false
    emit('maskClick')
}

const unLockSuccess = async () => {
    await modal.value.close()
    await useNextTick()
    setTimeout(() => {
        uni.showTabBar({ animation: false })
        showing.value = false
    }, 400);
    pUpVisiable.value = false
    emit('unLockSuccess')
}

defineExpose({ open, close });

</script>



<style lang="less" scoped>
.popup-content {
    width: 100vw;
    // height: calc(50vh + 80rpx);
    overflow-y: auto;
    background: #151515;
    transition: height 0.3s ease-in-out;
    position: fixed;
    bottom: 0;
    left: 0;
    // background: linear-gradient(90deg, #00EAFF 0%, #FF3DBD 100%);
    border-radius: 30rpx 30rpx 0rpx 0rpx;
    padding: 40rpx 0;

    .modal-title {
        font-size: 32rpx;
        color: #FFFFFF;
        text-align: center;
    }
}

.show-up {
    // height: calc(50vh + 80rpx);
}

.show-down {
    height: 0;
    overflow: hidden;
    padding: 0;
}
</style>